<template>
  <div class="orgGroup-add-wrapper">
    <div class="top">
      <div class="title-wrapper d-flex-sb">
        <div class="title">编辑课程</div>
        <el-button
          type="primary"
          style="background: #00ADB3; border-color: none"
          @click.native="confirm"
        >确认</el-button>
      </div>
    </div>
    <div class="content">
      <el-form :model="ruleForm" :inline="true" class="demo-form-inline mr-15" :rules="rules" label-width="100">
        <el-form-item label="起始时间：">
          <el-date-picker
            v-model="value"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="请输入开始日期"
            end-placeholder="请输入结束日期"
            :picker-options="pickerOptions"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="成团人数：" prop="team_num">
          <el-input v-model="ruleForm.team_num" placeholder="请输入成团人数" class="el-200" />
        </el-form-item>
        <el-form-item label="拼团价格：" prop="price">
          <el-input v-model="ruleForm.price" placeholder="请输入价格" class="el-200" />
          <span class="yuan">元</span>
        </el-form-item>
        <el-form-item label="选择课程：" prop="class">
          <el-select
            v-model="ruleForm.class"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.course_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择章节：" prop="chapter">
          <el-select v-model="ruleForm.chapter" clearable placeholder="全部" @change="selectChange">
            <el-option
              v-for="item of classicList"
              :key="item.id"
              :label="item.kind_name"
              :value="item.id"
            />
          </el-select>
          <!-- <el-cascader v-model="value" placeholder="全部" :options="classicList" clearable @change="handleChange" /> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { addOrEditCluster } from '@/api/request/org-group'
import { getClassList } from '@/api/request/class'
const ERR_OK = 200
export default {
  data() {
    return {
      ruleForm: {
        id: '',
        start_time: '',
        end_time: '',
        team_num: '',
        price: '',
        course_id: '',
        course_chapter_id: ''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      options: [],
      value: [],
      list: [],
      loading: false,
      states: ['Alabama', 'Alaska', 'Arizona',
        'Arkansas', 'California', 'Colorado',
        'Connecticut', 'Delaware', 'Florida',
        'Georgia', 'Hawaii', 'Idaho', 'Illinois',
        'Indiana', 'Iowa', 'Kansas', 'Kentucky',
        'Louisiana', 'Maine', 'Maryland',
        'Massachusetts', 'Michigan', 'Minnesota',
        'Mississippi', 'Missouri', 'Montana',
        'Nebraska', 'Nevada', 'New Hampshire',
        'New Jersey', 'New Mexico', 'New York',
        'North Carolina', 'North Dakota', 'Ohio',
        'Oklahoma', 'Oregon', 'Pennsylvania',
        'Rhode Island', 'South Carolina',
        'South Dakota', 'Tennessee', 'Texas',
        'Utah', 'Vermont', 'Virginia',
        'Washington', 'West Virginia', 'Wisconsin',
        'Wyoming'],
      classicList: [
        {
          id: 1,
          kind_name: '课程'
        }
      ],
      rules: {
        num: [
          { required: true, message: '请输入成团人数', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' }
        ],
        class: [
          { required: true, message: '请选择课程', trigger: 'blur' }
        ],
        chapter: [
          { required: true, message: '请选择章节', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` }
    })
  },
  methods: {
    selectChange() {},
    handleChange() {},
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        this._getClassList(query)
      } else {
        this.options = []
      }
    },
    _addOrEditCluster({ id, start_time, end_time, team_num, price, course_id, course_chapter_id }) {
      addOrEditCluster({ id, start_time, end_time, team_num, price, course_id, course_chapter_id })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getClassList(keyword) {
      getClassList({ keyword })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.options = res.list
            this.loading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
.orgGroup-add-wrapper {
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  height: 100%;
  flex: 1;
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0 35px;
    .title-wrapper {
      width: 100%;
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
      }
    }
  }
  .content {
    padding: 0 40px;
    box-sizing: border-box;
    width: 600px;
    .yuan {
      position: absolute;
      top: 0;
      right: 7px;
      color: #101010 !important;
    }
  }
}
.d-flex-sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-form /deep/ .el-form-item__content {
  width: 350px;
}
</style>
